<template>
	<view class="add-list" @tap.prevent="do_addCycleSubmit(cycleEditData,'close')">
		<view class="add-cycle-info" @tap.stop>
			<view class="flex f-side height-fixed"> 
				<view class="flex"> {{isAddNew?"新增项目":"修改项目"}}</view> 
					<!-- <picker class="input" v-if="isAddNew"  :range="cardArray" @change="getPiker" :value="cardIndex" > -->
						<view style="min-width: 420upx;" class="flex zcJustifyC_end" v-if="cycleEditData.IsChangeItem&&canSelect" @tap="do_editCycle(cycleEditData)">
							<view class="piker-text zcOverflow3" v-if="cycleEditData.Class3">{{cycleEditData.Class3}}</view>
							<view  class="iconfont icon-down-trangle f-center"></view>
						</view>
					<!-- </picker> -->
					<view class="flex" v-if="!cycleEditData.IsChangeItem||!canSelect">
						<view class="piker-text" v-if="cycleEditData.Class3">{{cycleEditData.Class3}}</view>
					</view>
			</view>
			<view class="flex height-fixed zcAlignI_center"> <view>意向到店时间</view>
			  <view>
					<picker mode="date"  @change="getTime($event,cycleEditData)" :value="cycleEditData.ExpireDate">
						<view class="flex date-image">{{ExpireDate}} <image src="../../static/jinri_xuanzhong.png" mode=""></image></view>
					</picker>
				</view>
			</view>
			<view class="flex textarea"> <view class="flex zcAlignI_center">{{isAddNew?"新增跟进说明":"修改跟进说明"}}</view><view class="zcFlex1"><textarea :class="opcity1?'opcity1':''"  placeholder=" " v-model="cycleEditData.Remark" auto-height/></view></view>
			<view > 上传车辆照片</view>
			<view class="up-photo-wrap">
				<scroll-view scroll-y class="scroll-view">
					<view class="up-photo">
							<zc-up-photo :image="img8" :maxlength="0" :zcId="img8.id" @upImage="upImage" @rmImage="rmImage"></zc-up-photo>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="btn-add f-center"> <button type="primary" @tap.stop="do_addCycleSubmit(cycleEditData,'submit')">确定</button></view>
	</view>
</template>

<script>
	let _this;
		import zcUpPhoto from "../zc-upPhoto/zc-upPhoto.vue"
		export default{
			components:{
				zcUpPhoto
			},
			data(){
				return{
					startTime:'',
					img7:{
						id:7,
						bgImag:'../../static/car7.png',
						images:[],
						imgInfos:[]
					},
					img8: {
						id: 8,
						bgImag: '../../static/car7.png',
						images: [],
						imgInfos: []
					},
					cardIndex:'0',
					ExpireDate:''
				}
			},
			props:{
				isAddNew:{
					type:Boolean,
					default:true
				},
				cycleEditData:{
					type:Object
				},
				opcity1:Boolean,
				canSelect:{
					type:Boolean,
					default:true
				}
			},
			created(){
				_this = this;
				_this.ExpireDate=_this.cycleEditData.ExpireDate;
			  if(_this.cycleEditData.fils instanceof Array && _this.cycleEditData){
					_this.cycleEditData.fils.forEach((item)=>{
						if(item.LUrl){
							_this.img8.images.push(item);
							_this.img8.images.forEach((item)=>{
								item.url = item.LUrl
							})
						}
					})
				}
			},
			methods:{
				do_editCycle(item){
					_this.$emit("do_editCycle",item)
				},
				getTime(e,item){
					_this.ExpireDate = e.detail.value
					item.ExpireDate = e.detail.value
				},
				do_addCycleSubmit(item,name){
					_this.$emit('do_addCycleSubmit',item,name)
				},
				upImage(res) {
					console.log("上传");
					_this.img8.images = res.images;
					_this.img8.imgInfos = res.imgInfos;
					_this.cycleEditData.fils = res.imgInfos
				
				},
				rmImage(res) {
					console.log("上传删除");
					_this.img8.images.splice(res.index, 1);
					_this.img8.imgInfos.splice(res.index, 1);
				},
			}
		
		}
</script>

<style>
	.add-list{
			position: fixed;
			top:0;
			bottom: 0;
			width: 100%;
			background-color: rgba(0,0,0,.3);
			z-index:889;
		}
		.add-cycle-info{
			position: absolute;
			top:30%;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 0 30upx 20upx 30upx;
			box-sizing: border-box;

		}
	.add-cycle-info>view>view:nth-of-type(1){
		flex: 0 0 210upx;
	}
		.up-photo{
			color: #A0A0A0;
		}

		.height-fixed{
			height: 100upx;
			line-height: 100upx;
			border-bottom: 2upx solid #F0F0F0;
		}
		.date-image image{
			width: 32upx;
			height: 32upx;
			margin: 9upx 0 0 25upx;
		}
		textarea{
			width: 100%;
			line-height: 35upx;
			padding-top: 30upx;
			padding-bottom: 30upx;
			position: relative;
			z-index: 2;
		}
		.textarea{
		  border-bottom: 2upx solid #F0F0F0;
			margin-bottom: 20upx;
			min-height: 100upx;
			overflow: hidden;
		}
		.btn-add{
			position: absolute;
			bottom: 0;
			height: 120upx;
			width: 100%;
			z-index:999
		}
		.btn-add button{
			width: 90%;
			border-radius: 10upx;
			height: 100upx;
			line-height: 100upx;
			background-color: #50ADFD;	
			/* font-size: 28upx; */
			}
.piker-text{
	margin-right: 18upx;
	border: 1upx solid #7CA3E6;
	color: #7CA3E6;
	padding: 0upx 15upx;
	height: 45upx;
	line-height: 45upx;
	border-radius: 15upx;
	max-width: 420upx;
}
.icon-down-trangle{
		color: #7CA3E6;
}
.up-photo-wrap{
	height: 300upx;
	position: relative;
}
.scroll-view{
	height: 100%;
	width: 100%;
}
.opcity1{
	opacity: 0 !important;
	margin-left: 1000upx !important;
}
</style>
